<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1-验证Diffing算法</title>
</head>
<body>

<div id="root"></div>

<!--引入React核心库-->
<script type="text/javascript" src="../0-ReactJs-v17.0.2/react.development.js"></script>
<!--引入React-Dom，用于支持React操作Dom-->
<script type="text/javascript" src="../0-ReactJs-v17.0.2/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js-->
<script type="text/javascript" src="../0-ReactJs-v17.0.2/babel.min.js"></script>

<script type="text/babel">

  class Time extends React.Component{

    state = {
      date:new Date()
    }

    componentDidMount(){
      setInterval(()=>{
        this.setState({
          date: new Date()
        })
      },1000)
    }

    render(){
      return (
              <div>
                <h1>Hello</h1>
                <input type="text"/>
                <span>现在是：{this.state.date.toTimeString()}</span>
              </div>
      )
    }
  }

  ReactDOM.render(<Time/>,document.getElementById('root'))
</script>

</body>
</html>